Dynamic Drive- All Levels Menu Generator

Online Tools

Other Sections

Generator Info

Based on DD Levels Menu v4.0
Generator tool requires IE7+, FF2+, Opera 8+, or Safari 3+
Menu code tested/ works in: IE6+, FF2+, Opera 8+, or Safari 3+
Tool last updated: Aug 16th, 2016.

Known Issues

In IE8 beta2, certain themes' (those that support easy alignment) sub menus drop down too close to the top main items. For the time being, this can be fixed with the following META Tag.
In IE6, there may be minor display issues with the menu in general.

Home Tools All Levels Menu Generator

All Levels Menu Generator is an online wizard for quickly creating themed versions of All Levels Menu with a handful of attractive horizontal menu designs. Just click on the desired design to see a preview, and when you see one that you like, following the directions below. Enjoy!

: preview

Click on the desired one to see the download instructions for it following it.

Install Instructions For

Description.

Step 1: Download the theme specific .css file: ddlevelsmenu-topbar.css to "/ddlevelsfiles". This file changes depending on your theme selected. Media content.

Step 2: Insert the following code into the <head> section of your page:

The above code references 4 external files and 2 images, which you should download below. By default, they should all be uploaded to the sub directory "/ddlevelsmenu" relative to your menu page:

ddlevelsfiles/ddlevelsmenu.js (download)
ddlevelsfiles/ddlevelsmenu-base.css (download)
ddlevelsfiles/ddlevelsmenu-topbar.css (Downloaded above already. Theme specific file).
ddlevelsfiles/ddlevelsmenu-sidebar.css (download)
ddlevelsfiles/ddlevelsmenu-mobile.css (download)

Step 3: Finally, add the below HTML code where you wish the menu to appear on your page:

Select All

<div id="ddtopmenubar" class="classholder">
<ul>
<li><a href="http://www.dynamicdrive.com">[[[Home]]]</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" rel="ddsubmenu1">[[[DHTML]]]</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="ddsubmenu2">[[[CSS]]]</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">[[[Forums]]]</a></li>
<li><a href="http://tools.dynamicdrive.com/" rel="ddsubmenu3">[[[Web Tools]]]</a></li>
</ul>
</div>

<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
  <ul>
  <li><a href="#">Sub Item 3.1a</a></li>
  <li><a href="#">Sub Item 3.2a</a></li>
  <li><a href="#">Sub Item 3.3a</a></li>
  <li><a href="#">Sub Item 3.4a</a></li>
  </ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
  <ul>
  <li><a href="#">Sub Item 5.1a</a></li>
  <li><a href="#">Item Folder 5.2a</a>
    <ul>
    <li><a href="#">Sub Item 5.2.1a</a></li>
    <li><a href="#">Sub Item 5.2.2a</a></li>
    <li><a href="#">Sub Item 5.2.3a</a></li>
    <li><a href="#">Sub Item 5.2.4a</a></li>
    </ul>
  </li>
	</ul>
</li>
<li><a href="#">Item 6a</a></li>
</ul>

<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Item 1b</a></li>
<li><a href="#">Item 2b</a></li>
<li><a href="#">Item Folder 3b</a>
  <ul>
  <li><a href="#">Sub Item 3.1b</a></li>
  <li><a href="#">Sub Item 3.2b</a></li>
  <li><a href="#">Sub Item 3.3b</a></li>
  <li><a href="#">Sub Item 3.4b</a></li>
  </ul>
</li>
<li><a href="#">Item 4b</a></li>
<li><a href="#">Item Folder 5b</a>
  <ul>
  <li><a href="#">Sub Item 5.1b</a></li>
  <li><a href="#">Item Folder 5.2b</a>
    <ul>
    <li><a href="#">Sub Item 5.2.1b</a></li>
    <li><a href="#">Sub Item 5.2.2b</a></li>
    <li><a href="#">Sub Item 5.2.3b</a></li>
    </ul>
  </li>
	</ul>
</li>
<li><a href="#">Item 6b</a></li>
</ul>

<ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a></li>
<li><a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a></li>
<li><a href="http://tools.dynamicdrive.com/password/">htaccess Password</a></li>
<li><a href="http://tools.dynamicdrive.com/userban/">htaccess Banning</a></li>
</ul>

The code of Step 3 above varies slightly depending on the theme you've selected. Specifically:

The main DIV's CSS class name changes accordingly.
For certain themes, the HTML for the top menu items contains a SPAN that wraps around each menu link (A element).

In general, the portions highlighted in yellow above changes depending on your selected theme. This is useful information to know if you're modifying an existing All Levels Menu to use another theme.

And there you have it! For additional details on customizing the menu, see the main All Levels Menu page.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post